<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2023-07-04 15:57:42
 * @LastEditors: zss 'zss872406501@163.com'
 * @LastEditTime: 2024-03-19 14:36:42
-->

<template>
  <div class="full-width-height main" :style="{ justifyContent: align }">
    <span
      class="title"
      v-if="!!title"
      :ref="title"
      @mouseenter="onMouseEnter(title)"
      >{{ $srv.getI18nByPath(title) }} :</span
    >
    <iSwitch
      size="large"
      v-model="switchVal"
      :disabled="disabled"
      @on-change="switchChange"
    >
      <Icon type="md-checkmark" slot="open"></Icon>
      <Icon type="md-close" slot="close"></Icon>
    </iSwitch>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ifs, ts, vue, I_cmd, Tcmd } from './config';

@T_srv.comp
export default class cSwitch extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: false,
    type: String,
    default: null
  })
  title: string;

  @T_srv.prop({
    required: false,
    type: Boolean,
    default: false
  })
  value: boolean;

  @T_srv.prop({
    required: false,
    type: Boolean,
    default: false
  })
  disabled: boolean;

  // 对齐方式
  @T_srv.prop({
    required: false,
    type: String,
    default: 'left',
    validator: val => {
      return /^left|center|right$/.test(val);
    }
  })
  align: string;

  /* 组件名 */
  private G_compName: string = 'cSwitch';

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = Tcmd;

  private switchVal: boolean = false;

  @T_srv.watch('value')
  setSwitchVal(val: boolean) {
    this.switchVal = val;
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.switchVal = this.value;
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  public switchChange(e) {
    this.$emit('input', e);
    this.$emit('on-change', e);
  }

  private onMouseEnter(el) {
    if (this.$refs[el]['scrollWidth'] > this.$refs[el]['offsetWidth']) {
      this.$refs[el]['title'] = Tsrv.getI18nByPath(el);
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: row;
  align-items: center;
  .title {
    margin-right: 6px;
    margin-left: 6px;
  }
}
</style>
